<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="ddddd">
    <div class="ms-nav">
      <div class="body">
        <div class="logo">
          <img
            title=""
            alt=""
            src="https://www.qinchuangyuan.com/upload/1/appLogo/1673231886331.png"
            class="logo-pic"
          />
        </div>
        <div class="nav-items">
          <template v-for="(v, i) in menuList">
            <el-dropdown v-if="v.sub" :key="i">
              <a class="item">
                <span>{{ v.label }}</span>
                <el-icon> <arrow-down /> </el-icon>
              </a>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item v-for="(itm, idx) in v.sub" :key="idx">
                    <a :href="itm.url" class="item">
                      <span>{{ itm.label }}</span>
                    </a>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <div v-else class="item" :key="i" @click="routerClick(v)">
              <el-tooltip
                v-if="v.pageId === 8"
                class="item"
                effect="dark"
                content="grafana需要登录  admin/123456"
                placement="top-start"
              >
                <span>{{ v.label }}</span>
              </el-tooltip>
              <span v-else>{{ v.label }}</span>
            </div>
          </template>
        </div>
        <div>
          <el-radio-group v-model="radio1" size="small" @input="sourceInput">
            <el-radio-button label="微信小程序"></el-radio-button>
            <el-radio-button label="PC端"></el-radio-button>
          </el-radio-group>
        </div>
        <div class="nav-login">
          <div v-if="!loginTF">
            <button type="button" class="header-btn login" @click="login">
              登录
            </button>
            <button type="button" class="header-btn register" @click="register">
              注册
            </button>
          </div>
          <div v-else class="image-container">
            <div
              :class="dologUserdata ? 'loginAcatar2' : 'loginAcatar'"
              @mouseenter="jinlai"
              @mouseleave="chuqu"
            >
              <div class="asdasdadasdasdas">
                <img
                  src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                  class="imageindex"
                />
                <!-- <span>
                  {{
                    userData.username === "admin"
                      ? `尊贵的：${userData.username}`
                      : `亲爱的：${userData.username}`
                  }}
                  {{ timeNowutf }}
                </span> -->
              </div>

              <!-- <div class="asdasdas" v-show="dologUserdata">
                <avatar
                class="pppp"
                  @logout="logout"
                  :userData="userData"
                  :timeNowutf="timeNowutf"
                ></avatar>
              </div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="asdasdas"
      v-show="dologUserdata"
      @mouseenter="jinlainei"
      @mouseleave="chuqu"
    >
      <avatar
        @logout="logout"
        :userData="userData"
        :timeNowutf="timeNowutf"
      ></avatar>
    </div>
  </div>
</template>
<script>
import avatar from "./avatar.vue";
export default {
  // import引入的组件需要注入到对象中才能使用
  name: "easyroadShows",
  components: { avatar },
  props: {
    loginTF: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    // 这里存放数据
    return {
      radio1: "微信小程序",
      userData: {},
      dologUserdata: false,
      menuList: [
        {
          url: "/home",
          label: "首页",
          pageId: 1,
        },
        {
          url: "/page",
          label: "页面维护",
          pageId: 113,
        },
        {
          url: "/unitTypes",
          label: "单元维护",
          pageId: 5,
        },
        {
          url: "/pageConfigs",
          label: "页面配置管理",
          pageId: 55,
        },
        {
          label: "空闲页面",
          sub: [
            {
              url: "/pageConfigsUnitsData",
              label: "低频页面",
              pageId: 6,
            },
            {
              url: "https://www.qinchuangyuan.com/html/web/financial/index.html",
              label: "高频页面",
              pageId: 7,
            },
          ],
        },
        {
          url: "https://qcy-frame-test.qinchuangyuan.com/grafana",
          label: "数据埋点",
          pageId: 8,
        },
      ],
      current: "",
      timeNowutf: "",
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    loginTF: {
      immediate: true,
      deep: true,
      handler: function (val) {
        if (val) {
          this.userData = JSON.parse(localStorage.getItem("user"));
          this.timeNowutf = this.getTimeState();
        }
      },
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.eChoSource();
    this.login();
  },
  activated() {},
  // 方法集合
  methods: {
    jinlai() {
      this.dologUserdata = true;
    },
    chuqu() {
      this.dologUserdata = false;
    },
    jinlainei() {
      this.dologUserdata = true;
    },
    getTimeState() {
      // 获取当前时间
      let timeNow = new Date();
      // 获取当前小时
      let hours = timeNow.getHours();
      // 设置默认文字
      let state = ``;
      // 判断当前时间段
      if (hours >= 0 && hours <= 10) {
        state = `早上好!`;
      } else if (hours > 10 && hours <= 14) {
        state = `中午好!`;
      } else if (hours > 14 && hours <= 18) {
        state = `下午好!`;
      } else if (hours > 18 && hours <= 24) {
        state = `晚上好!`;
      }
      return state;
    },
    eChoSource() {
      if (this.$sourceData.source === "WECHAT_MINI_APP") {
        this.radio1 = "微信小程序";
      } else {
        this.radio1 = "PC端";
      }
    },
    loginUser() {
      this.userData = JSON.parse(localStorage.getItem("user"));
    },
    login() {
      if (!localStorage.getItem("token")) {
        this.$router.push({
          path: "/login",
          // query: {
          //   pageId: val.pageId,
          //   baseData: val,
          // },
        });
      }
    },
    logout() {
      this.$emit("logout");
      localStorage.removeItem("token");
      this.login();
    },
    routerClick(val) {
      if (val.pageId === 8) {
        window.open(val.url, "_blank");
      } else {
        if (this.loginTF) {
          this.$router.push({
            path: val.url,
            query: {
              pageId: val.pageId,
              baseData: val,
            },
          });
        } else {
          // this.$message({
          //   type: "error",
          //   message: "请登录",
          //   showClose: true,
          // });
          this.$router.push({
            path: val.url,
            query: {
              pageId: val.pageId,
              baseData: val,
            },
          });
        }
      }
    },
    sourceInput(val) {
      this.radio1 = val;
      this.$emit("sourceInput", val);
      if (val === "微信小程序") {
        this.$sourceData.source = "WECHAT_MINI_APP";
      } else {
        this.$sourceData.source = "WEB";
      }
    },
    register() {
      this.$message({
        type: "info",
        message: "功能尚未开发额😥",
        showClose: true,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.ms-nav {
  position: -webkit-sticky;
  position: sticky;
  z-index: 1;
  top: 0;
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  flex-direction: row;
  width: 100%;
  min-width: 1200px;
  height: 60px;
  background: #fff;
  border-bottom: 1px solid #ebeef5;

  .body {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    width: 1200px;
    box-sizing: border-box;
    justify-content: space-between;
    height: 100%;
    align-items: center;
  }

  .logo {
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    display: flex;
    padding-right: 0px;
    box-sizing: border-box;
    padding-left: 0px;
    justify-content: flex-start;
    width: 60px;
    margin-right: 20px;
    height: 100%;

    img {
      height: 40px;
      width: fit-content;
    }
  }

  .nav-items {
    display: flex;

    .item {
      color: #333;
      margin: 0px 20px;
      word-wrap: break-word;
      display: block;
      height: 40px;
      line-height: 40px;
      font-size: 15px;
    }
  }

  .nav-login {
    .header-btn {
      background-color: #fff;
      border: 1px solid #8ab8dd;
      color: #8ab8dd;
      border-radius: 4px;
      text-align: center;
      padding: 0;
      line-height: 30px;
      width: 64px;
      font-size: 16px;
      cursor: pointer;

      &.register {
        margin-left: 10px;
        color: #fff;
        background-color: #8ab8dd;
      }
    }
  }
  .nav-mobile {
    display: none;
  }
}
@media screen and (max-width: 720px) {
  .ms-nav {
    width: 100%;
    height: 50px;
    min-width: auto;

    .body {
      width: 100%;
      padding: 0 16px;
    }

    .logo {
      height: 100%;

      img {
        height: 40px;
        width: fit-content;
      }
    }

    .nav-items {
      display: none;
    }

    .nav-login {
      display: none;
    }
    .nav-mobile {
      display: flex;
      align-items: center;
      height: 100%;
    }
    .menu-mobile {
      position: absolute;
      top: 100%;
      right: 16px;
      padding: 0px;
      background: #fff;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      .item {
        padding: 8px 16px;
        a {
          color: #000;
        }
        span {
          color: #666;
        }
        .itm {
          display: block;
          padding-left: 16px;
          line-height: 32px;
        }
        & + .item {
          border-top: 1px solid #eee;
        }
      }
    }
  }
}
</style>
<style lang="less">
.loginAcatar2 {
  display: flex;
  justify-content: center;
  align-items: center;
  .imageindex {
    width: 40px;
    height: 40px;
  }
  transition: transform 0.3s ease; /* 平滑过渡效果 */
  transform: translateY(10px);
  color: #fff;
}

.loginAcatar {
  display: flex;
  justify-content: center;
  align-items: center;
  .imageindex {
    width: 40px;
    height: 40px;
  }
}
.asdasdas {
  z-index: 99;
  .asdasdas .pppp {
    transition: transform 0.3s ease; /* 平滑过渡效果 */
    /* 初始状态，你可以根据需要调整这些值 */
    transform: scale(1);
  }
  // pointer-events: none;
  position: absolute;
  // width: 250px;
  min-height: 200px;
  // top: 25px;
  // left: -2%;
  top: 35px;
  left: 76%;
}
</style>
